<template lang="html">
    <div class="box">
        <div class="header">
            <el-form class="filterCondition demo-form-inline" :inline="true" label-width="80px">
                <el-input placeholder="输入市代名称" v-model="keyword" style="width: 420px;">
                  <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
                </el-input>
                <el-form-item label="发布时间" style="margin-bottom: 0;width: 520px;">
                  <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
                    value-format="yyyy-MM-dd HH:mm:ss" >
                  </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="body">
            <el-table v-loading="loading" :data="tableData.list" style="width: 100%">
                <el-table-column label="标题" prop="title" align="center" width=""></el-table-column>
                <el-table-column label="发布时间" prop="create_time" align="center" width=""></el-table-column>
                 <el-table-column label="发送对象" align="center" width="">
                    <template slot-scope="scope">
                    <el-tag size="mini" v-for='(item,index) of scope.row.sendto' :key='index' style='margin:0 5px 5px 0'>{{item | sendto}}</el-tag>
</template>
                 </el-table-column>
                  <el-table-column label="发布人" prop="create_person" align="center" width=""></el-table-column>
                <el-table-column label="详情" align="center" width="">
                  <template slot-scope="scope">
  <!-- <el-popover placement="left" width="800" trigger="click"> -->

  <!-- <div slot="reference" class="name-wrapper">
                              <el-tag size="medium">查看详情</el-tag>
                          </div> -->
  <el-button @click="handleClick(scope.row)"
             type="primary"
             size="mini"
             plain>查看详情</el-button>
  <!-- </el-popover> -->
</template>
                </el-table-column>
                <el-table-column label="修改" align="center" width="">
                    <template slot-scope="scope">
  <el-button @click="setClick(1,scope.row)"
             type="text"
             size="small">修改</el-button>
</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="switchPage" :current-page="currentPage" :page-count='tableData.rows' >
            </el-pagination>
        </div>

        <el-dialog title="内容" :visible.sync="dialogTableVisible1">
        <div class="" style="padding:10px;border:1px solid #ccc;margin-top:20px;">
              <span style="line-height:30px;margin-bottom:10px;border-bottom:1px solid #ccc;display:block;">内容详情</span>
              <div class="html-content" v-html="content.content"></div>
            </div>
        </el-dialog>

        <!-- <el-dialog title="内容详情"  width="600" :visible.sync="dialogTableVisible">
            <div class="" style="padding:10px;border:1px solid #ccc;margin-top:20px;">
              <span style="line-height:30px;margin-bottom:10px;border-bottom:1px solid #ccc;display:block;">内容详情</span>
              <div class="html-content" v-html="content.content"></div>
            </div>
        </el-dialog> -->


        <el-dialog title="修改" width="40%" :visible.sync="dialogTableVisible2">
            <div class="">
              <el-form label-position="right" class="form" label-width="80px" :model="formLabelAlign">
                  <el-form-item label="标题">
                      <el-input v-model="formLabelAlign.title"></el-input>
                  </el-form-item>
                  <el-form-item label="内容">
                      <Tinymce v-model='formLabelAlign.content'></Tinymce>
                  </el-form-item>
                  <el-form-item label="发送对象">
                      <el-select v-model="formLabelAlign.sendto" multiple placeholder="请选择发送对象">
                          <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="setClick(2)">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/Tinymce'
export default {
  data () {
    return {
      keyword: '',
      loading: true,
      dialogTableVisible: false,
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      formLabelAlign: {
        id: '',
        title: '',
        content: '',
        sendto: []
      },
      typeList: [],
      intervalTime: [],
      tableData: [],
      content: '',
      currentPage: 1
    }
  },
  filters: {
    sendto (item) {
      return item == 1 ? '乘用车用户' : item == 2 ? '乘用修理厂' : item == 3 ? '乘用代理商' : item == 4 ? '商用车主' : item == 5 ? '商用修理厂' : item == 6 ? '商用代理商' : item == 7 ? '技师' : item == 8 ? '供应商' : item == 9 ? '约驾出行' : item == 10 ? 'VIP' : item == 12 ? '运营商总监' : '服务经理'
    }
  },
  components: { Tinymce },
  created () {
    this.msgList()
  },
  methods: {
    search () {
      this.msgList()
    },
    msgList (page = 1) {
      this.currentPage = page
      this.$http4.msgList({
        key: this.keyword,
        start_time: (this.intervalTime && this.intervalTime[0]) || '',
        end_time: (this.intervalTime && this.intervalTime[1]) || '',
        page: page
      }).then(res => {
        this.tableData = res.data.code == 1 ?
          res.data.data : [];
        this.loading = false;
      })
    },
    switchPage (e) {
      this.msgList(e)
    },
    handleClick (e) {
      this.content = e;
      this.dialogTableVisible1 = true;
    },
    onInput (e) {
      this.formLabelAlign.content = e.getContent();
    },
    sendto (e) {
      this.$http4.sendto().then(res => {
        this.typeList = res.data;
        for (var i = 0; i < e.sendto.length; i++) {
          if (typeof parseInt(e.sendto[i]) == 'number') {
            this.formLabelAlign.sendto[i] = Number(e.sendto[i]);
          }
        }
        // this.formLabelAlign.sendto = result;
      })
    },
    setClick (n, e) {
      if (n == 1) {
        this.sendto(e)
        this.dialogTableVisible2 = true;
        this.formLabelAlign.id = e.id;
        this.formLabelAlign.title = e.title;
        this.formLabelAlign.content = e.content;
        return;
      }
      this.$http4.updateMsg(this.formLabelAlign).then(res => {
        if (res.data.code == 1) {
          this.$message.success(res.data.msg)
          this.dialogTableVisible2 = false;
          this.formLabelAlign.id = '';
          this.formLabelAlign.title = '';
          this.formLabelAlign.content = '';
          this.msgList()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #3498e9;
  border: none;
  color: white;
}
/deep/ .preview-img {
  display: block;
  width: 100%;
  height: 30px;
}
.el-select {
  width: 100%;
}
.page_box {
  text-align: center;
}
/deep/ .html-content img {
  width: 100%;
  display: block;
}
</style>
